<template>
  <div class="audio-book-list">
    <c-title :text="'有声书'"></c-title>
    <div class="list-data">
      <d-list @load="getMoreData" :finished="!isLoadMore" :loading="loading" :showStatusText="true">
        <div class="list-item" v-for="(item,index) in dataList" :key="index">
        <div style="display: flex;">
          <div class="index">{{index+1}}</div>
          <div class="img" @click="toAudioInfo(item.id)">
            <img :src="item.image_url" alt="" style="width:5.625rem;height:5.625rem;border-radius: 0.5rem;">
            <i class="iconfont icon-bofang"></i>
          </div>
          <div class="info" @click="toAudioInfo(item.id)">
             <div class="title">{{item.book_title}}</div>
             <div class="radio-count">音频数：{{item.audio_count}}</div>
          </div>
        </div>
        <div class="line"></div>
        </div>
      </d-list>
    </div>
  </div>
</template>

<script>
import DList from "@/components/dlist";
export default {

  data () {
    return {
      loading: false,
      isLoadMore: true, //判断是否要加载更多的标志
      page:1,
      dataList:[],
      last_page:0
    };
  },

  methods: {
    getMoreData() {
      console.log("执行");
      if (this.loading === true || this.isLoadMore === false) {
        return;
      }

      // console.log('加载更多启动');
      this.loading = true; // 防止多次请求分页数据
      if (this.page >= this.last_page) {
        this.isLoadMore = false;
        //console.log('没了');
      } else {
        this.page += 1;
        let json = {
          page: this.page,
          page_size:10
        };
        $http
          .get("plugin.audio-book.frontend.book.get-list", json, "...")
          .then(res => {
            this.loading = false;
            if (res.result == 1) {
              let nextPageData = res.data.data.data;
              this.dataList = this.listData.concat(nextPageData); //进行数组拼接
            } else {
              this.page = this.page - 1;
            }
          })
          .catch(error => {
            console.log(error);
          });
      }
    },
    toAudioInfo(id){
      this.$router.push(this.fun.getUrl("audio_book_info",{},{id}));
      // this.$router.push({name:'audio_book_info',query:{id}});
    },
    getData(){
      $http
        .get("plugin.audio-book.frontend.book.get-list", {}, " ")
        .then((response) => {
          const data = response.data.data;
          if (response.result === 1) {
            this.last_page = data.last_page;
            this.page = data.current_page;
            this.dataList =  data.data;
          }else{
            this.$message.error(response.msg);
          }
        });
    }
  },
  created(){
    this.getData();
  },

  components: { DList },
};

</script>
<style lang='scss' rel='stylesheet/scss' scoped>
.list-data{
  margin-top: 0.6rem;
  background-color: #ffffff;
  padding: 1.5rem  2.06rem;
 .list-item{
  margin-top: 0.95rem;
  .index{
    text-align: center;
    font-size: 1.125rem;
    line-height: 5rem;
    color: #6E6E79;
  }
  .img{
    margin-left: 0.9375rem;
    border-radius: 0.5rem;
    position: relative;
    cursor: pointer;
    i{
    position: absolute;
    bottom: 0.5625rem;
    font-size: 1.125rem;
    right: 0.125rem;
    }
  }
  .info{
    cursor: pointer;
    margin-left: 0.9375rem;
    text-align: left;
    .title{
      font-size: 0.875rem;
      font-weight: 500;
      color: #00001C;
    }
    .radio-count{
      font-size: 0.8125rem;
      color: #6E6E79;
      margin-top: 0.75rem;
      text-align: left;
    }
  }
  .line{
    margin-top: 0.9375rem;
    height: 0.0625rem;
    background: #F0F0F1;
  }
 }
}
</style>